<template>
    <div>
        <Modal width="1650"
               v-model="modal.scanCourseDetail"
               @on-cancel="cancel"
               title="编辑上课地址">
            <div class="modalDiv"></div>
            <Form inline :label-width="100">
                <FormItem prop="collegeId" label="周：">
                    <Select v-model="week" clearable class="myform">
                        <Option v-for="item in list" :value="item" :key="item">第{{item}}周</Option>
                    </Select>
                </FormItem>
            </Form>
            <a-table bordered :columns="columns" :data-source="data" :pagination="false">

            </a-table>
            <Button slot="footer" type="info" @click="ok">确定</Button>
        </Modal>
    </div>
</template>

<script>

    import 'ant-design-vue/dist/antd.css';
    import Vue from 'vue';
    import {Table} from 'ant-design-vue';

    Vue.component(Table.name, Table);
    Vue.use(Table);


    export default {
        name: "scanCourseDetail",
        props: {
            modal: {
                scanCourseDetail: false,
                row: [],
            },
            placeList:null
        },
        data() {
            return {
                week: "一",
                sonRefresh:true,
                addressMap: {}, //addressMap[day] = list.
                addAddressMap: {},
                editAddressMap: {},
                operationMap:{},
                listWeer: [],
                columns:[
                    {
                        title: '上课时间',
                        width: 200,
                        dataIndex:'time',
                    },
                    {
                        title: '星期一',
                        width: 200,
                        dataIndex:'monday_place'
                    },
                    {
                        title: '星期二',
                        width: 200,
                        dataIndex:'tuesday_place'
                    },
                    {
                        title: '星期三',
                        width: 200,
                        dataIndex:'wednesday_place'
                    },
                    {
                        title: '星期四',
                        width: 200,
                        dataIndex:'thursday_place'
                    },
                    {
                        title: '星期五',
                        width: 200,
                        dataIndex:'friday_place'
                    },
                    {
                        title: '星期六',
                        width: 200,
                        dataIndex:'saturday_place'
                    },
                    {
                        title: '星期日',
                        dataIndex:'sunday_place'
                    }

                ],
                data: [],
                templateData: [
                    /**
                     * 1-2节
                     */
                    {
                        key: '0',
                        time: '1-2节',
                        monday_place: '',
                        tuesday_place: '',
                        wednesday_place: '',
                        thursday_place: '',
                        friday_place: '',
                        saturday_place: '',
                        sunday_place: ''
                    },
                    /**
                     * 3-4节
                     */
                    {
                        key: '1',
                        time: '3-4节',
                        monday_place: '',
                        tuesday_place: '',
                        wednesday_place: '',
                        thursday_place: '',
                        friday_place: '',
                        saturday_place: '',
                        sunday_place: ''
                    },
                    /**
                     * 5-6节
                     */
                    {
                        key: '2',
                        time: '5-6节',
                        monday_place: '',
                        tuesday_place: '',
                        wednesday_place: '',
                        thursday_place: '',
                        friday_place: '',
                        saturday_place: '',
                        sunday_place: ''
                    },
                    /**
                     * 7-8节
                     */
                    {
                        key: '3',
                        time: '7-8节',
                        monday_place: '',
                        tuesday_place: '',
                        wednesday_place: '',
                        thursday_place: '',
                        friday_place: '',
                        saturday_place: '',
                        sunday_place: ''
                    },
                    /**
                     * 9-11节
                     */
                    {
                        key: '4',
                        time: '9-11节',
                        monday_place: '',
                        tuesday_place: '',
                        wednesday_place: '',
                        thursday_place: '',
                        friday_place: '',
                        saturday_place: '',
                        sunday_place: ''
                    },
                ],
                timetableDO: {},
                timetableList: [],
                list: [],
            }
        },
        methods: {
            ok() {this.modal.scanCourseDetail=false;},
            getAddressData(list) {
                for (let index = 0; index < list.length; index++) {
                    if (this.addressMap[list[index].day]) {
                        list[index]['key'] = this.addKey(list[index].time);
                        this.addressMap[list[index].day].splice(list[index]['key'], 1, list[index]);
                    } else {
                        let listData = [];
                        this.list.push(list[index].day)
                        Object.assign(listData, this.templateData)
                        list[index]['key'] = this.addKey(list[index].time);
                        listData.splice(list[index]['key'], 1, list[index]);
                        this.addressMap[list[index].day] = listData;
                    }
                }
                console.log(this.list)
                //处理完数据后展示数据（默认展示）
                this.exhibitionData("一");
            },
            addKey(str) {
                if (str == '1-2节') {
                    return 0;
                } else if (str == '3-4节') {
                    return 1;
                } else if (str == '5-6节') {
                    return 2;
                } else if (str == '7-8节') {
                    return 3;
                } else {
                    return 4;
                }
            },
            /**
             * 展示数据
             */
            exhibitionData(str) {
                //展示指定周次课表exhibitionData
                if (this.addressMap[str]) {
                    this.data = this.addressMap[str]
                } else {
                    this.data = this.templateData
                }
                console.log(this.data)
                console.log(this.addressMap[str])
                this.sonRefresh= false;
                this.$nextTick(() => {
                    this.sonRefresh= true;
                });
            }
            ,
            cancel() {

            },
        },
        created(){
        },
        watch:{
            'modal.row'(e)
            {
                Object.assign(this.$data, this.$options.data())
                if (e) {
                    console.log(this.modal.row)
                    //讲课程地址数据渲染到表格中
                    this.getAddressData(e)
                }
            }
            ,
            week(e)
            {
                this.data = []
                this.exhibitionData(e)

            }
            ,
            'modal.scanCourseDetail'(e){
            }
        }
    }
</script>

<style scoped>
    .myform {
        width: 280px;
    }
</style>
